<script setup>

  import { listAssetItem } from "@/api/consume/file.js";
  import {Search} from "@element-plus/icons-vue";

  const { proxy } = getCurrentInstance();
  const { normal_cannot_status } = proxy.useDict("normal_cannot_status");
  const openFlag = ref(false);
  const table = ref();
  const tableData = reactive({
    loading: false,
    list: [],
    paging: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  });
  const queryParams = reactive({
    field: 'number',
    value: null
  });

  function open() {
    openFlag.value = true;
    getList();
  }

  function close() {
    openFlag.value = false;
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    tableData.paging.pageNum = 1;
    getList();
  }

  /** 查询资产清单表列表 */
  async function getList() {
    tableData.loading = true;
    const {pageNum, pageSize} = tableData.paging;
    const query = {...queryParams};
    const pageReq = {page: pageNum - 1, size: pageSize};
    listAssetItem(query, pageReq).then(response => {
      const { content, totalElements } = response
      tableData.list = content;
      tableData.paging.total = totalElements;
      tableData.loading = false;

    }).catch(error => {
      tableData.loading = false;
      console.log(error);
    });
  }

  const emit = defineEmits(['sub'])

  function sub() {
    const selections = table.value.getSelectionRows();
    emit('sub', selections);
    close();
  }

  function showImg(img) {
    return import.meta.env.VITE_APP_BASE_API + img;
  }

  defineExpose({
    open
  })


</script>

<template>
  <div>
    <el-dialog ref="dialog" v-model="openFlag" title="选择档案" width="50%" append-to-body>
      <el-form style="margin-bottom: 20px;">

        <el-input
            v-model="queryParams.value"
            style="max-width: 300px"
            placeholder="请输入"
        >
          <template #prepend>
            <el-select v-model="queryParams.field" placeholder="请选择" style="width: 80px">
              <el-option label="编码" value="number" />
              <el-option label="名称" value="name" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="sub" />
          </template>
        </el-input>


      </el-form>

      <el-table ref="table" v-loading="tableData.loading" :data="tableData.list">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column width="120" label="图片" align="center" prop="number">
          <template #default="scope">
            <el-tooltip v-if="scope.row.imgUrl"
                        class="box-item"
                        effect="dark"
                        placement="right-start"
            >
              <template #content>
                <img alt="" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
              </template>
              <img alt="" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
            </el-tooltip>
            <span v-else>没有图片</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="80" align="center" prop="state">
          <template #default="scope">
            <dict-tag :options="normal_cannot_status" :value="scope.row.state" />
          </template>
        </el-table-column>

        <el-table-column width="120" label="编码" align="center" prop="number"/>
        <el-table-column width="180" label="名称" align="center" prop="name"/>
        <el-table-column width="120" label="分类" align="center" prop="categoryName"/>
        <el-table-column width="120" label="商品条码" align="center" prop="barcode"/>
        <el-table-column width="120" label="品牌" align="center" prop="brand"/>
        <el-table-column width="120" label="规格型号" align="center" prop="model"/>

      </el-table>

      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          :page.sync="tableData.paging.pageNum"
          :limit.sync="tableData.paging.pageSize"
          @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<style scoped lang="scss">

</style>